﻿<!doctype html>
<html>

<head resource>
    <title>预载效果</title>
    <link type="text/css" rel="stylesheet" href="icon.css">
    <link type="text/css" rel="stylesheet" href="Styles/Loading.css">
</head>

<body>
    <h1>预载小图标</h1>
    <p>
        在网页中引用“/Utilities/Fonts/icon.css”，即可使用预载图标，默认在/templates/文件夹下的模板文件中，都已经引用该css文件，可以直接采用下述方法使用。
    </p>
    <p>显示 <loading></loading>，采用如下代码：</p>
    <textarea><loading></loading></textarea>
    <p>显示 <loading>正在加载中...</loading>，（在预载图标后面增加说明文字），代码如下：</p>
    <textarea><loading>正在加载中...</loading></textarea>

    <p>更多样式</p>
    <div>
        <loading fish>...</loading>
        <loading bubble></loading>
        <loading fresh></loading>
        <loading star></loading>
    </div>
    <textarea rows="5">
        <loading fish>...</loading>   
        <loading bubble></loading>  
        <loading fresh></loading>    
        <loading star></loading>
    </textarea>
    <h1>预载的大图标</h1>
    <p>大的预载图标往往用于页面加载，或较大区域内容的加载。只需要在指定的html标签上增加 loading属性即可，后面实例大都是以DIV为例，实际上可以是任意html标签。</p>
    <p>效果如下：</p>
    <div loading="p1"></div>
    <textarea> <div loading="p1"></div></textarea>
    <span loading="p2">loading...</span>
    <textarea> <span loading="p2">loading...</span></textarea>
    <div loading="p3">加载中...</div>
    <textarea> <div loading="p3">加载中...</div></textarea>
    <div loading="p4"></div>
    <textarea> <div loading="p4"></div></textarea>
    <div loading="p5"></div>
    <textarea> <div loading="p5"></div></textarea>
    <div loading="p6"></div>
    <textarea> <div loading="p6"></div></textarea>
    <div loading="p7"></div>
    <textarea> <div loading="p7"></div></textarea>
    <div loading="p8"></div>
    <textarea> <div loading="p8"></div></textarea>
</body>

</html>